{include file="public/header" /}
<title>首页</title>
	<link rel="stylesheet" type="text/css" href="__CSS__/swiper.min.css" />
<style>
    body {
        background-color:#F4F4F4;
        outline: 0;
    }
    .aui-bar-nav {
        background: linear-gradient(-127deg, rgba(248, 28, 107, 1), rgba(248, 28, 107, 1));
    }

    .local {
        height: 2.4rem;
        width: 28.5px;
        background: url('__IMG__/local.png') no-repeat center center;
        background-size: 13.5px 16px;
    }

    .school {
        height: 2.4rem;
        line-height: 2.5rem;
        font-size: 16px;
        color: #fff;
    }

    .arrow {
        height: 2.4rem;
        width: 10.5px;
        background: url('__IMG__/right_arrow.png') no-repeat center center;
        background-size: 5px 9.5px;
    }

    .shop {
        height: 2.4rem;
        width: 2.2rem;
        background: url('__IMG__/shop1.png') no-repeat left center;
        background-size: 20px 21px;
    }

    .search {
        height: 2.4rem;
        width: 2.25rem;
        background: url('__IMG__/search1.png') no-repeat left center;
        background-size: 18px 19px;
    }

    .message {
        height: 2.4rem;
        width: 1.675rem;
        background: url('__IMG__/message.png') no-repeat left center;
        background-size: 18.5px 18px;
    }

    .group {
        height: 2.15rem;
        width: 1rem;
        background: url('__IMG__/group.png') no-repeat left center;
        background-size: 0.825rem 0.825rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .navbar {
        /*width: 100%;*/
        background-color: #FFFFFF;

    }

    .tab-grid {
        width: 100%;
        height: 2.15rem;
        /*overflow-x: scroll;*/
        /*overflow-y: hidden;*/
        background-color: white;
        position: relative;
        /*padding-left: 0.5rem;*/
    }

    .tab-grid::-webkit-scrollbar {
        height: 0;
    }

    .tab-item {
        float: left;
        height: 2.15rem;
        /*padding-left: 0.375rem;*/
        /*padding-right: 1rem;*/
        line-height: 2.25rem;
        text-align: center;
        font-size: 0.75rem;
        color: #666;
        z-index: 10;
    }

    .tab-item-all {
        width: 10000%;
        padding-left: 0.15rem;
    }

    .item_active {
        color: #FF5757;
        font-size: 0.75rem;
    }

    .swiper-container2 {
        width: 100%;
        height: 7.5rem;
        background-color: #fff;
        overflow: hidden;
    }

    .swiper-container2 .swiper-slide {
        width: 100%;
        padding: 0 0.5rem;
        overflow: hidden;
    }
    .swiper-slide img {
        width: 100%;
        height:100%;
    }
    .swiper-pagination{
        position: absolute;
        left:0;
        top:11rem;
    }
    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        display: inline-block;
        border-radius: 100%;
        background: #ccc;
    }

    .swiper-pagination-bullet-active {
        background: #FFFFFF;
        opacity: 1;
    }
    .four_11 {
        width:  2.6rem;
        height: 2.6rem;
        margin: 0 auto;
        margin-top: 0.8rem;
    }
    .four_name{
        font-size:14px;
        color:#555;
        padding-top:6px;
        padding-bottom: 13.5px;
        text-align: center;
    }
    .four {
        width: 100%;
        background-color: #fff;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .four_inner {
        width: 10000%;
    }
    .oneee {
        width: 3.8rem;
    }
    /*商品*/
    .three{
        padding:0.5rem;
        padding-bottom: 0;
        background-color:#F4F4F4;
    }
    .one{
        width: 32%;
        height:auto;
        background-color: #fff;
        /*float:left;*/
        display: inline-block;
        box-shadow:0px 1.5px 3px 0px rgba(0,0,0,0.2);
        border-radius:4px;
        margin-bottom:0.75rem;
    }
    .one_pic{
        width: 100%;
        height:5.575rem;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        position:relative;
    }
    .shop_pic{
        width:  100%;
        height: 100%;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .one:nth-child(3n+2) {
        margin-left:2px;
        margin-right:2px;
    }
    .intro{
        height:2.425rem;
        background-color: #fff;
        padding-top:0.3rem;
        padding-left: 5px;
        padding-right:5px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .tit{
        font-size:12px;
        color:#404040;
    }
    .price{
        font-size:12px;
        color:#F04040;
    }
    .weight{
        text-align: right;
        font-size:10px;
        color:#999;
        padding-top: 3px;
    }
    .fast{
        position: absolute;
        top:0;
        left:4.5px;
        width:  1.5rem;
        height: 1.6rem;
    }
    .fast img{
        width:  100%;
        height: 100%;
    }

    .mengban {
        background: rgba(0, 0, 0, 0.7);
        width: 100%;
        height: 2.5rem;
        color: #fff;
        font-size: 14px;
        text-align: center;
        position: fixed;
        bottom: 2.45rem;
        left: 0;
        padding-top: 5px;
        z-index: 999999;
    }



    .jian,
    .jia {
        width: 1rem;
        height: 1rem;
    }
    .number {
        padding-left:1.4rem;
        padding-right:1.4rem;
        font-size: 11px;
        color: #666;
        padding-top:3px;
    }
    .addCar{
        padding-left: 5px;
        padding-right:5px;
    }
    .navbar {
        width: 100%;
        background-color: #FFFFFF;
    }

    .tab-grid {
        width: 100%;
        height: 2.15rem;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: white;
        position: relative;
        padding-left: 0.5rem;
    }

    .tab-grid::-webkit-scrollbar {
        height: 0;
    }

    .tab-item {
        float: left;
        height: 2.15rem;
        /*padding-left: 0.375rem;*/
        padding-right: 1rem;
        line-height: 2.25rem;
        text-align: center;
        font-size: 0.75rem;
        color: #666;
        z-index: 10;
    }

    .tab-item-all {
        width: 10000%;
        padding-left: 0.15rem;
    }

    .item_active {
        color: #FF5757;
        font-size: 0.75rem;
    }
</style>
<style>
    .huadong{
        position: absolute;
        top:0;
        left: 0;
        height:100%;
        z-index: 9999;
        width:80%;
        /*border:1px solid red;*/
        display: none;
        opacity: 1;
        overflow: scroll;
        background-color: gainsboro;
    }
    .ovfHiden{overflow: hidden;height: 100%;}
</style>
<body>
	<header class="aui-bar aui-bar-nav" style="display:flex;" id="header">
		<div class="local" onclick="address()"></div>
		<div class="school aui-ellipsis-1" onclick="address()">{$address}</div>
		<!--<div class="arrow"></div>-->
		<div class="flex-con"></div>
		<div class="shop" id='one111'></div>
		<div class="search" id='one222'></div>
		<div class="message" onclick="message()"></div>
	</header>
    <div class="navbar flex-wrap">
        <div class="group" onclick="opennnn()"></div>
        <section class="tab-grid">
            <div class="tab-item-all" id="list">
                <div name="0" class="gogogogogogog tab-item">首页</div>
                {volist name='data' id='d'}
                <div name="{$d.s_id}" class="gogogogogogog tab-item {if $s_id==$d.s_id}item_active{/if}">{$d.s_pinlei}</div>
                {/volist}
            </div>
        </section>
    </div>
    <!--广告图-->
    {if $advert}
    <div class="swiper-container2">
        <div class="swiper-wrapper">

            {volist name='advert' id='adv'}
            <div class="swiper-slide" onclick="gogoodinfo({$adv.adv_g_id})"><img src="{$adv.adv_image}"/></div>
            {/volist}

        </div>
        <div class="swiper-pagination" style="width:100%;height:0.8rem;"></div>
    </div>
    {/if}
    <!--分类-->
    <div class="four">
        <div class="four_inner">
            {volist name='type' id='t'}
            <div class="aui-col-xs-3 oneee" typeid="{$t.st_id}" typename="{$t.st_name}" onclick="showList(this)">
                <img src="{$t.st_thumb}" class="four_11">
                <div class="four_name aui-ellipsis-2">{$t.st_name}</div>
            </div>
            {/volist}
            <div class="kong" style="width:0.4rem;height: 6.2rem;float:left;"></div>
        </div>
    </div>
<!--商品-->
    <div class="three">
            {volist name='good' id='g'}
            <div class="one" onclick="xq(this)" g_id="{$g.g_id}">
                <div class="one_pic">
                    {if $g.g_prcie_kill !='0'}
                    <div class="fast"><img src="__IMG__/fast.png" alt=""></div>
                    {/if}
                    <img src="{$g.g_thumb ?? '__IMG__/zhanweitu/a4.png'}" class="shop_pic" >
                </div>
                <div class="intro">
                    <div class="tit aui-ellipsis-1">{$g.g_name}</div>
                    <div class="flex-wrap">
                        <div class="price">￥{$g.g_price_now}</div>
                        <div class="flex-con weight aui-ellipsis-1">{$g.g_weight}</div>
                    </div>
                </div>
                <div class="flex-wrap addCar">
                    <div class="jian" tapmode onclick="delectOneProductAllPointtt(this)" g_id="{$g.g_id}"><img src="__IMG__/jian.png" alt=""></div>
                    <div class="number" id="numberrr_{$g.g_id}">{$g.haveNum}</div>
                    <div class="jia" tapmode onclick="addOneProductAllPointtt(this)" g_id="{$g.g_id}"><img src="__IMG__/add.png" alt=""></div>
                </div>
            </div>
            {/volist}
    </div>
<input type="hidden" id="s_id" value="{$s_id}" />
</body>
<div class="huadong">
    {if $data}
    {volist name='data' id='d'}
    <div class="picture gogogogogogog" name="{$d.s_id}">
        <img src="{$d.s_thumb ?? '__IMG__/zhanweitu/a1.png'}" />
    </div>
    {/volist}
    {else /}
    <div class="seat">
        <img src="__IMG__/quexing/no_content.png" class="seatImg"/>
        <div class="seatName">没有符合条件的内容</div>
    </div>
    {/if}
</div>
<div class="all_div" style="display:none;width: 100%;height: 100%;background-color: gray;position: absolute;z-index: 100;opacity: 0.7;top: 0;left: 0;"></div>
<!--超出营业时间提示-->
{if $chaochu == 1}
<div style="height: 2.5rem;"></div>
<div class="mengban" id='allllTime'>
    <div>配送时间 </div>
    <div><span id='startTime1'>{$shop.s_open}</span>-<span id='startTime2'>{$shop.s_close}</span></div>
</div>
{/if}
<!--超出营业时间提示end-->
{include file="public/footer" /}
<script type="text/javascript" src="__JS__/swiper.min.js"></script>
<script type="text/javascript" src="__JS__/tt22.js"></script>
<!--<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GZSILhN6GDZpDkdku64uWWnGTgTBQmzX"></script>-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=3108d268226b46915b5faa028a004245&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 5,
        spaceBetween: 1,
        freeMode: true, //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
        loop: false, //是否可循环
//        pagination: {
//            el: '.swiper-pagination',
//            clickable: true
//        },
    });
    var swiper2 = new Swiper('.swiper-container2', {
        slidesPerView: 'auto',
        loop: true,
        autoplay: 3000,
        autoplayDisableOnInteraction: false,
        pagination : '.swiper-pagination',
//        paginationType : 'fraction'
    });
    $('.gogogogogogog').click(function(){
//        $(this).addClass("item_active").siblings().removeClass("item_active");
        var s_id = $(this).attr('name');
        gowhere(s_id);
    });

	function address(el) {
        location.href = '{:url("Index/address")}';
    }
    function message(el) {
        location.href = '{:url("Index/message")}';
    }

    function gowhere(s_id) {
        if(s_id == 0){
            location.href = '{:url("home/Index/index")}';
        }else{
            location.href = '{:url("Index/shopInfo")}?s_id='+s_id;
        }
    }
    $('#one111').click(function () {
        var sid = $('#s_id').val();
        location.href = '{:url("Index/shopInfoMain")}?s_id='+sid;
    });
	$('#one222').click(function () {
        var sid = $('#s_id').val();
        location.href = '{:url("Index/goSearch")}?s_id='+sid;
    });


    //列表
    function showList(el) {
        var tid = $(el).attr('typeid');
        var name = $(el).attr('typename');
        var sid = $('#s_id').val();
        location.href = '{:url("home/Index/shopGoodList")}?s_id='+sid+'&type='+tid+'&name='+name;
    }
    //商品详情
    function xq(el) {
        var gid = $(el).attr('g_id');
        location.href = '{:url("home/Index/shopGoodInfo")}?g_id='+gid;
    }
    function gogoodinfo(gid) {
        location.href = '{:url("home/Index/shopGoodInfo")}?g_id='+gid;
    }
    //----------------------------------
    function opennnn() {
        $('.huadong').css('display','block');
        $('html,body').addClass('ovfHiden');
        $('.all_div').css('display','block');
//        $('.baifezhibashi').css('margin-left','80%');
//        $('#footer').css('margin-left','80%');
    }
    $('.all_div').click(function () {
        $('.huadong').css('display','none');
        $('html,body').removeClass('ovfHiden');
        $('.all_div').css('display','none');
//        $('.baifezhibashi').css('margin-left','80%');
//        $('#footer').css('margin-left','80%');
    });
    //----------------------------------
</script>
</html>
